<template>
    <div class="container">
        <div class="row">
            <div class="col-4">
                <div class="card align-items-center">
                    <div class="card-body">
                        <input type="text" v-model="carItem.id" disabled="false"><br>
                        <input type="text" v-model="carItem.name"><br>
                        <input type="text" v-model="carItem.price"><br>
                        <button @click="submit">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref,reactive,onBeforeMount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()

let carItem = reactive({
    id: '',
    name: '',
    price: ''
})

const props = defineProps(['id','name','price'])

console.log('props=>',props);
onBeforeMount(()=>{
    // carItem = {
    //     id:route.query.id,
    //     name:route.query.name,
    //     price:route.query.price
    // }
    Object.assign(carItem,{...route.query})


})


const submit = e => {
    console.log();
    router.push({
        path: '/',
        // query: {
        //     carItemId: carItem.id,
        //     carItemName: carItem.name,
        //     carItemPrice: carItem.price
        // }
        query:{...carItem}
    })
}


</script>

<style lang="scss" scoped></style>